<template>
	<Layout :class="'bg-white p-2'">
        <Row :class="'m-1'">         
            <Button type="error" @click="newCar" style="margin-left: 20px;">新增</Button>
        </Row>
        <Row :class="'m-1'">
           <el-select  v-model="sellPriceId" clearable placeholder="价格" size="small" style="width: 150px;margin-right: 20px;"
            @change="search(1)">
                <el-option
                  v-for="item in sellPrice"
                  :key="item.sellPriceId"
                  :label="item.priceInterval"
                  :value="item.sellPriceId">
                </el-option>
           </el-select>
            <el-select  v-model="conditionId" clearable placeholder="车龄" size="small" style="width: 150px;margin-right: 20px;"
             @change="search(1)">
                 <el-option
                   v-for="item in carConditions"
                   :key="item.conditonId"
                   :label="item.conditionInterval"
                   :value="item.conditonId">
                 </el-option>
            </el-select>
            <el-select v-model="mileageId" clearable placeholder="里程" size="small" style="width: 150px;margin-right: 20px;"
            @change="search(1)">
                <el-option
                  v-for="item in mileages"
                  :key="item.mileageId"
                  :label="item.mileageInterval"
                  :value="item.mileageId">
                </el-option>
            </el-select>
           
            <Input :class="'w-25 m-2'" v-model="searchKey" placeholder="请输入检索关键字" />
			<Button type="primary" shape="circle" @click="search(1)" icon="ios-search">查询</Button>
		</Row>
		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.carSellInfoId,row.carId)">详细</Button>
					<Button type="error" size="small" @click="remove(row.carSellInfoId)">删除</Button>
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch" :total="tableInfo.total" />
		</Layout>
	</Layout>
</template>

<script>
	export default {
		data() {
			return {
					searchKey: "",
                    brandId: 0,
                    sellPriceId:null,
                    conditionId: null,
                    mileageId: null,
					tableInfo: {
						currentPage: 1,
						total: 0,
						pageSize: 10,
						columnInfo: [
							{
								title: "车辆编号",
								key: "carId",
							},
							{
								title: "型号",
								key: "type",
							},
							{
								title: "归属地",
								key: "ownerShip",
							},
							{
								title: "车龄",
								key: "carCondition",
							},
							{
								title: "表显里程",
								key: "mileage",
							},
							{
								title: "操作",
								slot: 'action',
								width: 150
							}
						],
						data: [],
                        brands:[],
					},
                    carConditions: [
                        
                    ],
                    mileages: [
                    ],
					sellPrice:[											
					]
			};
		},
		methods: {
			init: function() {
				this.$data.tableInfo.currentPage = 0;
                // this.getConditions();
				this.search(1);
			},
			priceShow(){
				let self = this;
				self.http.get({
					url: "/sellprice/list",				
				}).then(data => {
					self.$data.sellPrice = data;
				});
			},
			conditionShow(){
				let self = this;
				self.http.get({
					url: "/car-condition/all",
				}).then(data => {
					self.$data.carConditions = data;
				});
			},
			mileageShow(){
				let self = this;
				self.http.get({
					url: "/mileage/all",
				}).then(data => {
					self.$data.mileages = data;
					
				});
			},
			newCar: function() {
				this.$router.push({
					name: "carSell_new"
				});
			},
			show: function(carSellInfoId,carId) {
				this.$router.push({
					name: "carSell_detail",
					params: {
						carSellInfoId,
						carId
					}
				});
			},
          
            
            
			search: function(current) {
               
				this.http.get({
					url: "/car-sell-info/page",
					param: {
						currentPage: current,
						searchKey: this.$data.searchKey,
                        brandId: this.$data.brandId,
                        sellPriceId: this.$data.sellPriceId,
                        conditionId: this.$data.conditionId,
                        mileageId: this.$data.mileageId
					}
				}).then(data => {
					this.$data.tableInfo.currentPage = data.current;
					this.$data.tableInfo.total = data.total;
					this.$data.tableInfo.pageSize = data.size;
					this.$data.tableInfo.data = data.records;
				});
			},
			pageSearch: function(changedPage) {
				console.log(changedPage);
				this.$data.tableInfo.currentPage = changedPage;
				this.search(changedPage);
			},
			remove: function(carSellInfoId) {
				
				this.message.confirm({
					title: "删除提示",
					content: "即将删除车辆，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/car-sell-info/info",
							param: {
								carSellInfoId
							}
						}).then(data => {
                            this.message.info('删除成功');
							this.search(this.$data.tableInfo.currentPage );
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
       
		},
		created: function() {
            
			this.init();
			this.priceShow();
			this.conditionShow();
			this.mileageShow();
		},
	}
</script>

<style>
    .el-dropdown-link {
        
        cursor: pointer;
        color: #409EFF;
      }
    .el-icon-arrow-down {
    font-size: 12px;
    }
    .el-button--primary {
        color: #000;
        background-color: #fff;
        border-color: lightgray;
        margin-left: 10px;
    }
</style>